<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .nav {
        width: 100%;
        display: flex;
        justify-content: space-evenly;
    }
    .productList{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-self: space-evenly;
    }
    .product{
        width: 200px;
        height: 300px;
        padding: 60px;
    }
    .product img{
        width: 200px;
    }
    
</style>

<body>
    <div id="root"></div>
</body>

<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
    class App extends React.Component {
        state = {
            list: [],
            index: 0
        }
       // compoentDidMount：组件渲染后 可以获取真实dom对象 可以做任意数据逻辑处理,可以调用this.setState,通常在此生命周期发送http请求请求数据
        componentDidMount() {
            fetch('http://demo26.crmeb.net/api/category')
                .then(res => res.json())
                .then(res => res.data)
                .then(res => {
                    this.setState({ list: res })
                })
        }

        render() {
            let { list, index } = this.state
            console.log(this.state.list)
            return (
                <div>
                    <div className='nav'>
                        {
                            list.map((item, index) => {
                                return <div onClick={() => this.setState({ index: index })} key={item.id}>{item.cate_name}</div>
                            })
                        }
                    </div>
                    <div className='productList'>
                        {

                            list.length == 0 ?  '' : list[index].children.map(item => <div key={item.id} className='product'><img src={item.pic} alt=""/><div>{item.cate_name}</div></div>)
                            
                        
                        }
                    </div>
                </div>
            );
        }
    }

    ReactDOM.render(<App />, document.getElementById('root'))

</script>

</html>